<template>
	<view class="register-container">
		<view class="register-card">
			<view class="back-btn" @click="goBack">
				<text class="icon">&#8592;</text> 返回
			</view>
			
			<view class="card-title">创建管理员账号</view>
			<view class="sub-title">首次使用系统，请创建管理员账号</view>

			<!-- 注册方式切换 -->
			<view class="register-tabs">
				<view class="tab-item" :class="{ active: registerType === 'password' }" @click="registerType = 'password'">
					密码注册
				</view>
				<view class="tab-item" :class="{ active: registerType === 'code' }" @click="registerType = 'code'">
					验证码注册
				</view>
			</view>
			
			<!-- 密码注册表单 -->
			<block v-if="registerType === 'password'">
				<view class="input-item">
					<view class="input-label">用户名 <text class="required">*</text></view>
					<input class="input" type="text" v-model="passwordRegister.username" placeholder="请输入用户名" />
				</view>
				
				<view class="input-item">
					<view class="input-label">邮箱 <text class="required">*</text></view>
					<input class="input" type="text" v-model="passwordRegister.email" placeholder="请输入邮箱" />
				</view>
				
				<view class="input-item">
					<view class="input-label">昵称</view>
					<input class="input" type="text" v-model="passwordRegister.nickname" placeholder="请输入昵称" />
				</view>
				
				<view class="input-item">
					<view class="input-label">密码 <text class="required">*</text></view>
					<input class="input" type="password" v-model="passwordRegister.password" placeholder="请输入密码" />
				</view>
				
				<view class="input-item">
					<view class="input-label">确认密码 <text class="required">*</text></view>
					<input class="input" type="password" v-model="passwordRegister.confirmPassword" placeholder="请再次输入密码" />
				</view>
			</block>
			
			<!-- 验证码注册表单 -->
			<block v-else>
				<view class="input-item">
					<view class="input-label">邮箱 <text class="required">*</text></view>
					<input class="input" type="text" v-model="codeRegister.email" placeholder="请输入邮箱" />
				</view>
				
				<view class="input-item">
					<view class="input-label">验证码 <text class="required">*</text></view>
					<view class="code-input-group">
						<input class="input code-input" type="text" v-model="codeRegister.code" placeholder="请输入验证码" />
						<button class="code-btn" :disabled="codeBtnDisabled" @click="handleSendCode">
							{{ codeBtnText }}
						</button>
					</view>
				</view>
				
				<view class="input-item">
					<view class="input-label">用户名 <text class="required">*</text></view>
					<input class="input" type="text" v-model="codeRegister.username" placeholder="请输入用户名" />
				</view>
				
				<view class="input-item">
					<view class="input-label">昵称</view>
					<input class="input" type="text" v-model="codeRegister.nickname" placeholder="请输入昵称" />
				</view>
				
				<view class="input-item">
					<view class="input-label">密码 <text class="required">*</text></view>
					<input class="input" type="password" v-model="codeRegister.password" placeholder="请输入密码" />
				</view>
				
				<view class="input-item">
					<view class="input-label">确认密码 <text class="required">*</text></view>
					<input class="input" type="password" v-model="codeRegister.confirmPassword" placeholder="请再次输入密码" />
				</view>
			</block>
			
			<button class="submit-btn" @click="handleSubmit" :disabled="loading">
				<text v-if="!loading">注册</text>
				<view v-else class="loading"></view>
			</button>
		</view>
	</view>
</template>

<script>
	import api from '@/api/index.js';
	
	export default {
		data() {
			return {
				registerType: 'password', // 'password' 或 'code'
				passwordRegister: {
					username: '',
					email: '',
					nickname: '',
					password: '',
					confirmPassword: ''
				},
				codeRegister: {
					email: '',
					code: '',
					username: '',
					nickname: '',
					password: '',
					confirmPassword: ''
				},
				loading: false,
				codeBtnDisabled: false,
				codeBtnText: '发送验证码',
				codeTimer: null,
				countdown: 60,
				hasAdmin: false
			}
		},
		onLoad() {
			// 检查是否已有管理员账号
			this.checkAdminExists();
		},
		onUnload() {
			// 清除定时器
			if (this.codeTimer) {
				clearInterval(this.codeTimer);
				this.codeTimer = null;
			}
		},
		methods: {
			// 检查是否已有管理员账号
			checkAdminExists() {
				api.auth.checkAdminExists().then(res => {
					// 后端返回的完整响应，取data字段作为结果
					this.hasAdmin = res.data;
					
					// 如果没有管理员账号，直接跳转到注册页
					if (!this.hasAdmin) {
						this.goToRegister();
					}
				}).catch(err => {
					uni.showToast({
						title: '检查管理员账号失败',
						icon: 'none'
					});
				});
			},
			
			// 发送验证码
			handleSendCode() {
				if (!this.codeRegister.email) {
					uni.showToast({
						title: '请输入邮箱',
						icon: 'none'
					});
					return;
				}
				
				// 邮箱格式验证
				if (!/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(this.codeRegister.email)) {
					uni.showToast({
						title: '邮箱格式不正确',
						icon: 'none'
					});
					return;
				}
				
				this.codeBtnDisabled = true;
				
				// 调用发送验证码接口
				api.email.sendCode({
					email: this.codeRegister.email,
					type: 'register'
				}).then(res => {
					uni.showToast({
						title: '验证码已发送',
						icon: 'success'
					});
					
					// 开始倒计时
					this.startCountdown();
				}).catch(err => {
					uni.showToast({
						title: err.message || '验证码发送失败',
						icon: 'none'
					});
					this.codeBtnDisabled = false;
				});
			},
			
			// 开始倒计时
			startCountdown() {
				this.countdown = 60;
				this.codeBtnText = `${this.countdown}秒后重试`;
				
				this.codeTimer = setInterval(() => {
					this.countdown--;
					this.codeBtnText = `${this.countdown}秒后重试`;
					
					if (this.countdown <= 0) {
						clearInterval(this.codeTimer);
						this.codeTimer = null;
						this.codeBtnText = '发送验证码';
						this.codeBtnDisabled = false;
					}
				}, 1000);
			},
			
			// 注册提交
			handleSubmit() {
				if (this.registerType === 'password') {
					this.submitPasswordRegister();
				} else {
					this.submitCodeRegister();
				}
			},
			
			// 密码注册提交
			submitPasswordRegister() {
				// 表单验证
				if (!this.validatePasswordForm()) {
					return;
				}
				
				this.loading = true;
				
				// 调用系统初始化接口
				api.auth.initSystem({
					username: this.passwordRegister.username,
					password: this.passwordRegister.password,
					email: this.passwordRegister.email,
					nickname: this.passwordRegister.nickname || this.passwordRegister.username
				}).then(res => {
					this.handleRegisterSuccess();
				}).catch(err => {
					uni.showToast({
						title: err.message || '注册失败',
						icon: 'none'
					});
				}).finally(() => {
					this.loading = false;
				});
			},
			
			// 验证码注册提交
			submitCodeRegister() {
				// 表单验证
				if (!this.validateCodeForm()) {
					return;
				}
				
				this.loading = true;
				
				// 先验证验证码
				api.email.verifyCode({
					email: this.codeRegister.email,
					code: this.codeRegister.code,
					type: 'register'
				}).then(res => {
					// 验证码正确，调用系统初始化接口
					return api.auth.initSystem({
						username: this.codeRegister.username,
						password: this.codeRegister.password,
						email: this.codeRegister.email,
						nickname: this.codeRegister.nickname || this.codeRegister.username,
						code: this.codeRegister.code // 传递验证码以便后端二次验证
					});
				}).then(res => {
					this.handleRegisterSuccess();
				}).catch(err => {
					uni.showToast({
						title: err.message || '注册失败',
						icon: 'none'
					});
				}).finally(() => {
					this.loading = false;
				});
			},
			
			// 处理注册成功
			handleRegisterSuccess() {
				uni.showToast({
					title: '注册成功',
					icon: 'success'
				});
				
				// 跳转到登录页
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/login/login'
					});
				}, 1000);
			},
			
			// 密码注册表单验证
			validatePasswordForm() {
				if (!this.passwordRegister.username) {
					uni.showToast({
						title: '请输入用户名',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.passwordRegister.email) {
					uni.showToast({
						title: '请输入邮箱',
						icon: 'none'
					});
					return false;
				}
				
				if (!/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(this.passwordRegister.email)) {
					uni.showToast({
						title: '邮箱格式不正确',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.passwordRegister.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return false;
				}
				
				if (this.passwordRegister.password.length < 6) {
					uni.showToast({
						title: '密码长度不能少于6位',
						icon: 'none'
					});
					return false;
				}
				
				if (this.passwordRegister.password !== this.passwordRegister.confirmPassword) {
					uni.showToast({
						title: '两次密码输入不一致',
						icon: 'none'
					});
					return false;
				}
				
				return true;
			},
			
			// 验证码注册表单验证
			validateCodeForm() {
				if (!this.codeRegister.email) {
					uni.showToast({
						title: '请输入邮箱',
						icon: 'none'
					});
					return false;
				}
				
				if (!/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(this.codeRegister.email)) {
					uni.showToast({
						title: '邮箱格式不正确',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.codeRegister.code) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.codeRegister.username) {
					uni.showToast({
						title: '请输入用户名',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.codeRegister.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return false;
				}
				
				if (this.codeRegister.password.length < 6) {
					uni.showToast({
						title: '密码长度不能少于6位',
						icon: 'none'
					});
					return false;
				}
				
				if (this.codeRegister.password !== this.codeRegister.confirmPassword) {
					uni.showToast({
						title: '两次密码输入不一致',
						icon: 'none'
					});
					return false;
				}
				
				return true;
			},
			
			// 返回登录页
			goBack() {
				uni.navigateBack();
			},
			
			// 跳转到注册页
			goToRegister() {
				// 实现跳转到注册页的逻辑
			}
		}
	}
</script>

<style>
	.register-container {
		min-height: 100vh;
		padding: 20px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #f5f5f5;
		background-image: linear-gradient(135deg, #3f51b5 0%, #2196f3 100%);
	}
	
	.register-card {
		width: 80%;
		max-width: 400px;
		background-color: #fff;
		border-radius: 8px;
		padding: 30px;
		box-shadow: 0 2px 25px rgba(0, 0, 0, 0.2);
		position: relative;
	}
	
	.back-btn {
		position: absolute;
		top: 15px;
		left: 15px;
		color: #3f51b5;
		font-size: 14px;
		cursor: pointer;
		display: flex;
		align-items: center;
	}
	
	.icon {
		margin-right: 5px;
		font-size: 16px;
	}
	
	.card-title {
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 10px;
		color: #333;
		text-align: center;
	}
	
	.sub-title {
		font-size: 14px;
		color: #666;
		margin-bottom: 20px;
		text-align: center;
	}
	
	.register-tabs {
		display: flex;
		margin-bottom: 20px;
		border-bottom: 1px solid #eee;
	}
	
	.tab-item {
		flex: 1;
		text-align: center;
		padding: 12px 0;
		font-size: 16px;
		color: #666;
		cursor: pointer;
	}
	
	.tab-item.active {
		color: #3f51b5;
		border-bottom: 2px solid #3f51b5;
	}
	
	.input-item {
		margin-bottom: 20px;
	}
	
	.input-label {
		font-size: 14px;
		margin-bottom: 6px;
		color: #333;
	}
	
	.required {
		color: #f44336;
	}
	
	.input {
		width: 100%;
		height: 40px;
		border: 1px solid #ddd;
		border-radius: 4px;
		padding: 0 12px;
		font-size: 14px;
		box-sizing: border-box;
	}
	
	.code-input-group {
		display: flex;
	}
	
	.code-input {
		flex: 1;
		margin-right: 10px;
	}
	
	.code-btn {
		width: 120px;
		height: 40px;
		background-color: #3f51b5;
		color: white;
		border: none;
		border-radius: 4px;
		font-size: 12px;
		cursor: pointer;
	}
	
	.code-btn:disabled {
		background-color: #ccc;
		cursor: not-allowed;
	}
	
	.submit-btn {
		width: 100%;
		height: 44px;
		background-color: #3f51b5;
		color: white;
		border: none;
		border-radius: 4px;
		font-size: 16px;
		cursor: pointer;
		margin-top: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.submit-btn:disabled {
		background-color: #ccc;
		cursor: not-allowed;
	}
	
	.loading {
		width: 20px;
		height: 20px;
		border: 2px solid rgba(255, 255, 255, 0.3);
		border-top: 2px solid #fff;
		border-radius: 50%;
		animation: spin 1s linear infinite;
	}
	
	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
</style> 